<template>
  <div class="app-container">

    <!--
        （1）第一步：
        在form.vue主页面中，从ElementUI官网，引入“发布新课程”导航条，让其它三个子页面共享
        :active="active"，跟Vue的data进行了单绑
        也就是当active的值发生改变时，对应的步骤条会发生变化，以及引入响应的页面
    -->
    <h2 style="text-align: center;">发布新课程</h2>
    <el-steps :active="active" finish-status="success" simple style="margin-bottom: 40px">
      <el-step title="填写课程基本信息" /><!--active的值为0时，显示这个步骤条，以及引入对应的页面-->
      <el-step title="创建课程大纲" /><!--active的值为1时，显示这个步骤条，以及引入对应的页面-->
      <el-step title="发布课程" /><!--active的值为2、3时，显示这个步骤条，以及引入对应的页面，3就表示三个步骤都完成了，停留了在了索引为2的发布课程页面-->
    </el-steps>

    <!-- 填写课程基本信息 -->
    <info v-if="active === 0" />

    <!-- 创建课程大纲 -->
    <chapter v-if="active === 1" />

    <!-- 发布课程 -->
    <publish-com v-if="active === 2 || active === 3" />

  </div>
</template>

<script>
/**
 * 【课程管理：整体的前端业务分析】
 * 在页面“课程管理”[course文件夹]下面，有两个页面：
 * （一）“课程列表”页面[course/list.vue]
 * -----------------------------------------------------------------------------------------------------------------------
 * （二）“发布课程”页面[course/form.vue]
 * 在“发布课程”页面中，又有三个页面组成：
 * (A)“课程信息”页面
 * (B)“课程大纲”页面
 * (C)“课程发布”页面
 * 这三个页面共用一个页面，而且这三个页面都有个共同的部分：在页面的顶部，都有一个“发布新课程”的导航条
 * 所以，也可以抽离出来当成一个组件，引入到“发布课程”页面中
 * 也就是，“发布课程”页面，实际就是由四个部分[vue组件]组成：
 * (A)“发布新课程”导航条
 * (B)“课程信息”页面[course/components/Info.vue]
 * (C)“课程大纲”页面[course/components/Chapter/index.vue]
 * (D)“课程发布”页面[course/components/Publish.vue]
 * 所以，新建一个组件文件夹[components]，存放这四个vue组件，动态引入到form.vue中
 * 注意点：
 * 页面作为组件，首字母要大写，表示当作form.vue的组件
 * 为什么“课程大纲”页面要建成一个文件夹[Chapter]？
 * 因为在“课程大纲”页面里面，有两个弹框页面：
 * (a)“课程大纲”页面[也就是Chapter/index.vue，index首字母没有大写，表示没有点击弹框时，会引入index.vue当作默认页面]
 * (b)"添加章节"弹框页面[course/components/Chapter/From.vue]因为"添加章节"按钮，就在Chapter页面中，所以存放在Chapter下面
 * (c)"添加课时"弹框页面[course/components/Video/From.vue]"添加课时"章节里面进行添加，涉及添加视频，所以单独抽取成一个组件页面
 * -----------------------------------------------------------------------------------------------------------------------
 * 【实现“发布课程”页面的步骤一】
 * （1）第一步：在form.vue主页面中，引入“发布新课程”导航条，让其它三个子页面共享
 * （2）第二步：编写“课程信息”页面[course/components/Info.vue]，提供对应的[保存并下一步]按钮
 * （3）第三步：编写“课程大纲”页面[course/components/Chapter/index.vue]，提供对应的[上一步]、[下一步]按钮
 * （4）第四步：编写“课程发布”页面[course/components/Publish.vue]，提供对应的[上一步]、[发布课程]按钮
 * （5）第五步：引入三个子组件页面，到“课程发布”页面[form.vue]中显示
 * （6）第六步：分别在三个子组件页面中，为每个按钮提供单击响应事件的方案
 *             在方法里面，通过[this.$parent.active = 0\1\2\3]来获取父组件vue对象中data属性中的active
 *             改变 active 的值来实现当点击按钮时，进行切换页面
 * -----------------------------------------------------------------------------------------------------------------------
 *【vue中引入子组件vue页面的步骤】
 *    1、第一步：引入子组件
 *              import 页面名[可以自定义] from '页面路径'
 *              例如：import PublishCom from '@/views/course/components/Publish'
 *    2、第二步：在当前页面的vue对象中，注册引入的vue组件做为子组件
 *              components: { Info, Chapter, Publish }
 *    3、第三步：在页面中，使用组件的名称就可以直接引入当做一个自定义标签使用
 *              注册过的子组件，将首字母小写，就可以当做标签使用，如果 子组件名称 使用了多个单词，
 *              需要将后面的单词使用-连接首字母转为小写
 *              例如：<info v-if="active === 0" />标签， info就是引入的“课程信息”Info.vue页面，当作一个标签使用了
 *                    <publish-com v-if="active === 2 || active === 3" />，PublishCom多个单词首字母转为小写，使用-连接
 *              例如：<el-upload>标签，也是通过引入ElementUI组件后，可以当作标签来使用的
 * -----------------------------------------------------------------------------------------------------------------------
 *【父子组件通信】
 * 如果当前页面引入了子组件，那么当前页面，就是子组件的父组件，父子组件间如何通信[相互在自己的页面进行引入]？
 * （1）子组件调用父组件的方法或者获取属性
 *  使用"this.$parent"，可以获取到它的父组件vue对象，然后可以直接[.方法]、[.属性]进行调用
 * 例如在子组件Info.vue页面中，通过this.$parent.active = 1，可以拿到父组件的vue对象中的data属性里面的active值，为其赋值
 * （3）父组件获取子组件属性或调用方法
 *      (A)使用"this.$children"，代表获取到当前父组件的所有的子组件集合，但是子组件集合是无序的，不好直接调用，一般不用
 *      (B)借鉴vue使用elementui的el-upload子组件，给子组件定义ref值，第二种方案，也就是给子组件也定义ref值
 *         然后通过"this.$refs.ref值"，获取到父组件内使用的定义了ref值的子组件
 * -----------------------------------------------------------------------------------------------------------------------
 * 【实现“发布课程”页面的步骤二】
 * （1）第一步：编写“课程信息”页面[course/components/Info.vue]
 *             ① 提供对应的用来收集课程信息的form表单，从ElementUI官网中opy
 *
 *
 *
 */

// 引入子组件
import Info from '@/views/course/components/Info'
import Chapter from '@/views/course/components/Chapter'
import PublishCom from '@/views/course/components/Publish'

export default {
  components: { Info, Chapter, PublishCom }, // 注册子组件
  data() {
    return {
      active: 0,
      courseId: '' // 用来保存Info.vue从后端返回来的课程id，方便三个子组件页面获取
    }
  }
}
</script>
